<template>
    <div class="edu-page-warp">
        <condition-card label-width="120px" @reset="reset" @search="onSubmit">
            <el-col :span="6">
                <el-form-item label="操作类型">
                    <el-select v-model="queryForm.type" style="width:100%" clearable>
                        <el-option
                            v-for="(item, index) in types"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item :label="$t('message.startTime')">
                    <el-date-picker
                        v-model="queryForm.startTime"
                        :placeholder="$t('message.plzSelect')"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item :label="$t('message.endTime')">
                    <el-date-picker
                        v-model="queryForm.endTime"
                        :placeholder="$t('message.plzSelect')"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    />
                </el-form-item>
            </el-col>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">预科志愿填报日志</div>
            <el-row>
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyword"
                        :placeholder="$t('score.failScoreManage.pleaseInt')"
                        style="width:200px"
                        @keyup.enter.native="onSubmit"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        />
                    </el-input>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px">
                <edu-table ref="mainTable" :url="getUrl()" :selection="false" :order="false">
                    <el-table-column label="操作类型" width="100" prop="type">
                        <template slot-scope="scope">
                            {{ getTypeLabel(scope.row.type) }}
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('label.stuCode')" width="100" prop="studentId" />
                    <el-table-column
                        :label="$t('label.studentName')"
                        width="100"
                        prop="studentName"
                    />
                    <el-table-column label="填报专业" prop="content" />
                    <el-table-column :label="$t('label.operator')" prop="operator" width="100" />
                    <el-table-column
                        :label="$t('label.operateTime')"
                        prop="operateTime"
                        width="180"
                    />
                </edu-table>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import * as APIs from 'common/src/api/preparatoryGraduation/enroll'
export default {
    name: 'PreparatoryLog',
    data() {
        return {
            queryForm: {
                type: null,
                startTime: null,
                endTime: null,
                keyword: null
            },
            types: []
        }
    },
    mounted() {
        this.types.push({ label: '学生', value: '0' })
        this.types.push({ label: '管理员', value: '1' })
        this.onSubmit()
    },
    methods: {
        reset() {
            this.queryForm.type = null
            this.queryForm.startTime = null
            this.queryForm.endTime = null
            this.queryForm.keyword = null
            this.onSubmit()
        },
        onSubmit() {
            this.$refs.mainTable.search(this.queryForm)
        },
        getUrl() {
            return APIs.getLogListPageURL()
        },
        getTypeLabel(val) {
            let item = this.types.find(item => item.value === val)
            return item ? item.label : null
        }
    }
}
</script>
